{% extends 'base.html' %}
{% load static %}

{% block title %}办理资产借出 - {{ borrow.asset.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-arrow-right me-2"></i>办理资产借出</h5>
                </div>
                
                <div class="card-body">
                    <div class="alert alert-success">
                        <h6><i class="fas fa-check-circle me-2"></i>审批已通过</h6>
                        <p class="mb-0">该借用申请已通过审批，现在可以办理借出手续。</p>
                    </div>
                    
                    <!-- 借出信息确认 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-laptop me-2"></i>资产信息</h6>
                                    <table class="table table-borderless table-sm mb-0">
                                        <tr>
                                            <td><strong>资产名称：</strong></td>
                                            <td>{{ borrow.asset.name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>资产编号：</strong></td>
                                            <td><code>{{ borrow.asset.asset_number }}</code></td>
                                        </tr>
                                        <tr>
                                            <td><strong>当前状态：</strong></td>
                                            <td><span class="badge bg-secondary">{{ borrow.asset.get_status_display }}</span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-user me-2"></i>借用人信息</h6>
                                    <table class="table table-borderless table-sm mb-0">
                                        <tr>
                                            <td><strong>借用人：</strong></td>
                                            <td>{{ borrow.borrower.get_full_name|default:borrow.borrower.username }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>所属部门：</strong></td>
                                            <td>{{ borrow.borrower_department.name|default:"未分配" }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>联系电话：</strong></td>
                                            <td>{{ borrow.contact_phone|default:"未提供" }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 借用详情 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">借用详情</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td width="120"><strong>借用目的：</strong></td>
                                            <td><span class="badge bg-info">{{ borrow.get_purpose_display }}</span></td>
                                        </tr>
                                        <tr>
                                            <td><strong>申请时间：</strong></td>
                                            <td>{{ borrow.created_at|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>预计归还：</strong></td>
                                            <td>{{ borrow.expected_return_date|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td width="120"><strong>审批人：</strong></td>
                                            <td>{{ borrow.approver.get_full_name|default:borrow.approver.username }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>审批时间：</strong></td>
                                            <td>{{ borrow.approved_at|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                        {% if borrow.approval_notes %}
                                        <tr>
                                            <td><strong>审批备注：</strong></td>
                                            <td>{{ borrow.approval_notes|truncatechars:30 }}</td>
                                        </tr>
                                        {% endif %}
                                    </table>
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <strong>借用说明：</strong>
                                <div class="border rounded p-3 mt-2 bg-light">
                                    {{ borrow.purpose_description }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 借出确认 -->
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle me-2"></i>借出确认</h6>
                        <ul class="mb-0">
                            <li>请确认借用人身份和借用资格</li>
                            <li>检查资产状态是否完好，如有问题请先处理</li>
                            <li>办理借出后，资产状态将变更为"已借出"</li>
                            <li>系统将自动记录借出时间和办理人信息</li>
                            <li>请提醒借用人按时归还，逾期将产生提醒</li>
                        </ul>
                    </div>
                    
                    <form method="post" class="mt-4">
                        {% csrf_token %}
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'assets:borrow_request_detail' borrow.pk %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回详情
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-danger me-2" onclick="history.back()">
                                    <i class="fas fa-times me-1"></i>取消
                                </button>
                                <button type="submit" class="btn btn-success" onclick="return confirm('确定要办理资产借出吗？')">
                                    <i class="fas fa-arrow-right me-1"></i>确认借出
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
